<html>

<head>
	<title>角色控制配置表列表</title>
	<meta charSet="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<script src="../../static/react/react.development.js" type="text/javascript"></script>
	<script src="../../static/react/react-dom.development.js" type="text/javascript"></script>
	<script src="../../static/react/moment-with-locales.min.js" type="text/javascript"></script>
	<script src="../../static/react/babel.min.js" type="text/javascript"></script>
	<!-- antd -->
	<link href="../../static/react/antd/antd.min.css" rel="stylesheet" type="text/css"/>
	<script src="../../static/react/antd/antd-with-locales.min.js" type="text/javascript"></script>
	<!-- axios -->
	<script src="../../static/react/axios.min.js" type="text/javascript"></script>
	<script src="../../static/react/qs.js" type="text/javascript"></script>
	<script src="../../static/react/lodash.min.js" type="text/javascript"></script>
	<script src="../../static/react/request.js" type="text/javascript"></script>
	<script src="../../ffres/dict/all.js" type="text/javascript"></script>
	<link href="../../static/react/common.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
	// 请求后台相对路径
	const baseURL = "../"
	// ant design 组件别名引用
	const { Button, Table, Modal,Layout, Menu, Breadcrumb,Tabs,Divider} = antd
	const { SubMenu } = Menu;
	const { Header, Content, Sider } = Layout;
	// 业务组件
	class App extends React.Component {
		constructor(props) {
			super(props)
			// 在构造器中获取引用实例
			this.formRef = React.createRef()
			this.modelFormRef = React.createRef()
			this.windowResize = this.windowResize.bind(this)
			this.tabChange = this.tabChange.bind(this)
			this.menuItemClick = this.menuItemClick.bind(this)
			this.tabEdit = this.tabEdit.bind(this)
			this.init = this.init.bind(this)
			// 将组件内函数绑定 this 上下文
			// 初始组件数据
			//获取url参数
			let search = window.location.search
			if (search.startsWith('?')) {
				search = search.substring(1, search.length)
			}
			search = Qs.parse(search)
			this.state = {
				list: [],
				pageInfo: {
					page: 1,
					size: 20,
					total: 0,
				},
				...search,
				modelTitle: "",
				show: "",
				loading: false,
				opType: "", // 操作类型
				rowSelection: null,
				selectedRowKeys: [],
				tabs: [],
				subsName:"",
				currentTab: "homePage",
				iframeHeight: 0
			}
		}

		init(){
			const self = this;
			API.request({
				baseURL: baseURL,
				method: "get",
				url: "../api/s/subs/info/"+self.state.subsCode,
				data: "",
			}).then(function(data){
				self.setState({
					subsName:data.rows.subsName
				})
			})
		}

		menuItemClick({ item, key, title, domEvent }) {
			const self = this
			console.log(key)
			console.log(item.node.innerText)
			if (this.state.tabs.find(function(t){ return t.key == key})) {
				this.setState({
					currentTab: key
				})
				return
			}
			this.setState(function(state){
				let tabs = state.tabs
				tabs.push({
					key: key,
					name: item.node.innerText,
					path: "../bsp-console/"+key,
					closable: true
				})
				return {
					tabs,
					currentTab: key
				}
			})

		}

		windowResize() {
			let iframeHeight = window.innerHeight - 64 - 50 - 10
			this.setState({
				iframeHeight: iframeHeight
			})
		}
		tabChange(tabKey) {
			this.setState({
				currentTab: tabKey
			})
		}
		tabEdit(targetKey, action){
			if (action == 'remove')
				this.remove(targetKey);
		};
		remove(targetKey) {
			const { tabs, currentTab } = this.state;
			let newActiveKey = currentTab;
			let lastIndex;
			tabs.forEach((pane, i) => {
				if (pane.key === targetKey) {
					lastIndex = i - 1;
				}
			});
			const newPanes = tabs.filter(pane => pane.key !== targetKey);
			if (newPanes.length && newActiveKey === targetKey) {
				if (lastIndex >= 0) {
					newActiveKey = newPanes[lastIndex].key;
				} else {
					newActiveKey = newPanes[0].key;
				}
			}
			this.setState({
				tabs: newPanes,
				activeKey: newActiveKey,
			});
		};
		componentDidMount() {
			this.windowResize()
			this.init()
			this.setState(function(state){
				let tabs = state.tabs
				tabs.push({
					key: "BatBatchInfoConfigList.html?subsCode="+this.state.subsCode,
					name: "批次信息",
					path: "../bsp-console/"+"BatBatchInfoConfigList.html?subsCode="+this.state.subsCode,
					closable: true
				})
				return {
					tabs,
					currentTab: "BatBatchInfoConfigList.html?subsCode="+this.state.subsCode
				}
			})
			window.addEventListener('resize', this.windowResize);
		}
		componentWillUnmount() {
			window.removeEventListener('resize', this.windowResize);
		}
		render() {
			const isOpen = this.props.isOpen
			let defaultOpenArray = []
			return (
				<div>
					<Layout>
						<Sider width={200} hight={300} style={{ background: '#ffffff' }}>
							<Menu mode="inline" //导航栏列出来显示
									// mode="horizontal"  //导航栏隐藏起来显示
									theme="blank"
								  defaultOpenKeys={['sub','sub1']}
								  defaultSelectedKeys={['BatBatchInfoConfigList.html?subsCode='+this.state.subsCode]}
							>
								<SubMenu key="sub" title={this.state.subsName} onClick={this.menuItemClick} >
									<Menu.Item key={"SSubsDatasourceList.html?subsCode="+this.state.subsCode }>数据源</Menu.Item>
									<Menu.Item key={"ScheduleMontior.html?subsCode="+this.state.subsCode} >执行节点</Menu.Item>
									<SubMenu key="sub1" title="批次配置">
										<Menu.Item key={"BatBatchInfoConfigList.html?subsCode="+this.state.subsCode}>批次信息</Menu.Item>
										<Menu.Item key={"BatBatchStageConfigList.html"}>批次阶段</Menu.Item>
										<Menu.Item key="PluginServiceParamList.html">服务参数</Menu.Item>
										<Menu.Item key={"SSrvsCronConfList.html?subsCode="+this.state.subsCode}>触发配置</Menu.Item>
									</SubMenu>
									<SubMenu key="sub2" title="批次监控">
										<Menu.Item key={"BatInstBatchList.html?subsCode="+this.state.subsCode}>批次监控</Menu.Item>
									</SubMenu>
								</SubMenu>
							</Menu>
						</Sider>
						<Content className="site-layout" style={{  padding: 0, margin: 0, minHeight: 280,background: '#ffffff'}}>
							<div className="site-layout-background">
								<Tabs type="editable-card" activeKey={this.state.currentTab}
									  hideAdd={true}
									  onChange={this.tabChange} onEdit={this.tabEdit}>
									{this.state.tabs.map(tab => (
										<Tabs.TabPane tab={tab.name} key={tab.key} closable={tab.closable}>
											<div style={{ height : this.state.iframeHeight }}>
												<iframe name={tab.key} src={tab.path} height="100%" width="100%" frameBorder="0" scrolling="auto"></iframe>
											</div>
										</Tabs.TabPane>
									))}
								</Tabs>
							</div>
						</Content>
					</Layout>
				</div>
			)
		}
	}

	ReactDOM.render(
			<antd.ConfigProvider locale={antd.locales.zh_CN}>
				<App/>

			</antd.ConfigProvider>,
			document.getElementById('app')
	);
</script>
</body>
</html>